<template>
  <div>
    <!-- 注册局部组件 -->
    <componentA></componentA>
    <componentB></componentB>


    <hr>
    <!-- 组件全局注册 -->
    <global-com></global-com>
    <global-use></global-use>
    <div>value: {{ value }}</div>
    <button @click="handClick">改变value的值</button>
  </div>
</template>
<!-- 
beforeCreate: 在实例被创建之前被调用
created: 在实例创建完成之后立即调用
beforeMount: 在挂载开始之前调用
mounted: 在挂载之后调用
beforeUpdate: 在数据更新之前调用 -->
<!-- 
setup：在组件实例化之前调用。在setup函数中可以设置响应式状态、引入其他模块等。
onBeforeMount：在组件挂载之前调用。
onMounted：在组件挂载之后调用。
onBeforeUpdate：在组件更新之前调用。
onUpdated：在组件更新之后调用。
onBeforeUnmount：在组件卸载之前调用。
onUnmounted：在组件卸载之后调用。 -->
<script setup>
defineOptions({
  name: 'zujian'
})
import {ref,onBeforeMount,onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount,onUnmounted } from 'vue'
// 注册局部组件
import componentA from './components/component-a.vue'
import componentB from './components/component-b.vue'

const value = ref(1)
function handClick() {
    value.value = 2
}

onBeforeMount(() => {
    console.log('onBeforeMount在组件挂载之前调用')
})

onMounted(() => {
    console.log('onMounted在组件挂载之后调用')
})

onBeforeUpdate(() => {
    console.log('onBeforeUpdate在组件更新之前调用')
})

onUpdated(() => {
    console.log('onUpdated在组件更新之后调用')
})

onBeforeUnmount(() => {
    console.log('onBeforeUnmount在组件卸载之前调用')
})

onUnmounted(() => {
    console.log('onUnmounted在组件卸载之后调用')
})
</script>

<style  lang="scss" scoped>
</style>